CSS進階

1. CSS特異性與層疊（Cascading）
   CSS特異性：當多個選擇器應用於同一個元素時，瀏覽器根據選擇器的特異性決定哪一條樣式規則生效。
   特異性計算規則：
   ID選擇器（如#id）的權重最大。
   類選擇器（如.class）次之。
   元素選擇器（如div、p）的權重最小。

   • *例：

     p {
       color: red;
     }
     .class-name {
       color: blue;
     }
     #id-name {
       color: green;
     }
     

     如果一個< p>元素同時有類class-name和IDid-name，則文字會顯示為綠色（ID的權重最高）。
     層疊（Cascading）：當特異性相同時，後定義的樣式會覆蓋之前定義的樣式。

2. CSS繼承
   某些屬性會自動從父元素繼承到子元素，例如color、font-family。
   你可以使用inherit明確要求一個屬性從父元素繼承：

     p {
       color: inherit;
     }
   

3. 顏色與背景
   顏色屬性：
   color：設置文字顏色。
   opacity：設置元素的透明度，取值範圍為0到1。
   背景屬性：
   background-color：設置背景顏色。
   background-image：設置背景圖片。
   background-repeat：控制背景圖片是否重複（默認是repeat）。
   background-size：設置背景圖片的大小（如cover覆蓋整個容器，contain根據比例縮放）。
   background-position：設置背景圖片的位置。
   例：

    body {
      background-image: url('image.jpg');
      background-size: cover;
      background-position: center;
    }
   

4. 盒陰影與文本陰影
   盒陰影：
   box-shadow：用於設置元素的陰影效果。語法為水平位移 垂直位移 模糊半徑 顏色

   • 例：

     div {
       box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
     }
     

   文本陰影：
   text-shadow：用於設置文本的陰影效果，語法與box-shadow類似。

   • 例：

     h1 {
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
     }
     

5. CSS動畫與過渡
   過渡（Transitions）：
   使用transition屬性來控制屬性的變化過程。常見屬性包括transition-property（要變化的屬性）、transition-duration（變化時間）、transition-timing-function（變化速度曲線）。

   • 例：

     button {
       background-color: blue;
       transition: background-color 0.3s ease;
     }
     button:hover {
       background-color: red;
     }
     ```m
     當鼠標懸停在按鈕上時，背景顏色會在0.3秒內從藍色過渡到紅色。
     

   動畫（Animations）：
   使用@keyframes定義動畫的不同階段，並使用animation屬性應用動畫。

• 例：

  @keyframes example {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
  }
  div {
    animation: example 2s infinite;
  }
  

  這段動畫會讓div元素水平移動100px，並在2秒內無限循環。

6. 彈性佈局（Flexbox）進階
   主軸與交叉軸：彈性佈局有主軸（主方向）和交叉軸（垂直方向）。使用flex-direction來設置主軸的方向。
   flex-direction: row;：元素按水平方向排列（默認值）。
   flex-direction: column;：元素按垂直方向排列。
   排列方式：
   justify-content：控制子元素在主軸上的對齊方式，如center、space-between、flex-end等。
   align-items：控制子元素在交叉軸上的對齊方式，如flex-start、center、flex-end等。
   彈性比例：
   flex-grow：控制元素在剩餘空間中的擴展比例。
   flex-shrink：控制元素在空間不足時的縮小比例。
   flex-basis：設置元素的初始大小。

7. CSS變形（Transforms）
   transform屬性用來應用2D或3D變形效果，如旋轉、縮放、移動、傾斜。
   常見的變形函數：
   translate(x, y)：移動元素的位置。
   rotate(deg)：旋轉元素（度數deg）。
   scale(x, y)：縮放元素的大小。

   • 例：

     div {
       transform: rotate(45deg) scale(1.5);
     }
     

8. 媒體查詢（Media Queries）
   媒體查詢使網頁可以根據不同的屏幕尺寸應用不同的樣式，從而實現響應式設計。

• 語法：

  @media (max-width: 768px) {
    body {
      font-size: 14px;
    }
  }
  

  這段樣式會在屏幕寬度小於768px時將字體大小設置為14px。

9. 響應式圖片與視口
   響應式圖片：
   使用max-width: 100%確保圖片在小屏幕下自動縮放，防止圖片超出容器範圍。

   • 例：

     img {
       max-width: 100%;
       height: auto;
     }
     

   視口設置：
   使用< meta>標籤設置視口，優化移動設備的瀏覽體驗